// src\views\sendbox\right-manage\RightList.jsx
// 权限列表
import React, { useEffect, useState } from 'react'
import { Space, Table, Tag, Button, Modal, message, Switch, Popover } from 'antd';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import axios from 'axios';
export default function RightList() {
  const [dataSource, setdataSource] = useState([]);
  // 初始化从模拟接口获取到动态的导航菜单数据
  useEffect(() => {
    axios.get('http://localhost:8888/rights?_embed=children').then(res => {
      // console.log("get导航数据", res.data);
      setdataSource(res.data);
    })
  }, [])
  const switchPermisson = (item) => {//改变数据权限
    
    item.pagepermisson=item.pagepermisson===1?0:1;

    if(item.grade===1){
      axios.patch(`http://localhost:8888/rights/${item.id}`,{
        pagepermisson:item.pagepermisson
      })
    }else{
      axios.patch(`http://localhost:8888/children/${item.id}`,{
        pagepermisson:item.pagepermisson
      })
    }

  }
  const columns = [
    // {
    //   title: "序号",
    //   dataIndex: "index",
    //   key: "index",
    //   render: ( _,record,ind) => {
    //     // console.log("序号index-----",record,ind);
    //     return <span>{ind}</span>
    //   }
    // },
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '权限名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      key: 'key',
      render: (key) => {
        return <Tag color="warning">{key}</Tag>
      }
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: (_, item) => {
        return (
          <Space>
            <Button type="primary" danger shape="circle" icon={<DeleteOutlined />} size="small" onClick={() => deleteRight(item)} />
            <Popover
              style={{ width: 'auto' }}
              content={<Switch defaultChecked={item.pagepermisson} onChange={()=>switchPermisson(item)} />}
              title="权限设置"
            >
              <Button type="primary" shape="circle" icon={<EditOutlined />} size="small" />
            </Popover>
          </Space>

        )
      }
    },
  ];
  const [open, setOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [currItem, setCurrItem] = useState({});
  const deleteRight = (item) => {
    console.log("点击删除", item);
    setCurrItem(item);
    setOpen(true);
  }
  const handleOk = () => {
    setConfirmLoading(true);
    if (currItem.grade !== 1) {//删除的是否是二级
      axios.delete(`http://localhost:8888/children/${currItem.id}`).then(res => {
        if (res.status === 200) {
          message.success("删除成功")
        } else {
          message.warning("删除失败")
        }
      })
    } else {
      axios.delete(`http://localhost:8888/rights/${currItem.id}`).then(res => {
        if (res.status === 200) {
          message.success("删除成功")
        } else {
          message.warning("删除失败")
        }

      })
    }
    setOpen(false);
    setConfirmLoading(false);
  };

  const handleCancel = () => {
    setOpen(false);
  };

  // const dataSource = [
  //   {
  //     id: 1,
  //     title: "首页",
  //     key: "/home",
  //   },
  //   {
  //     id: 2,
  //     title: "用户管理",
  //     key: "/user-manage",
  //   },
  // ];

  return (
    <div>
      <Table dataSource={dataSource} columns={columns} />
      <Modal
        title="删除"
        open={open}
        onOk={handleOk}
        okText="确定"
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
        cancelText="取消"
      >
        <p>
          确认删除？
        </p>
      </Modal>
    </div>
  )
}
